<template>
	<view class="charger-item flex" @click="toStep2">
		<view class="status flex">
			<view class="circle-progress">
				<lj-chart text="空闲" v-if="info.pileStatus == 0" :rotate="100" textColor="#42E0A2" color="#42E0A2"></lj-chart>
				<lj-chart text="已插枪" v-if="info.pileStatus == 1" :rotate="100" textColor="#FF4600" color="#FF4600"></lj-chart>
				<lj-chart text="即将完成" v-if="info.pileStatus == 2" :rotate="100" textColor="#1C6FFB" color="#1C6FFB"></lj-chart>
				<lj-chart text="离线" v-if="info.pileStatus == -1" :rotate="100" textColor="#969696" color="#969696"></lj-chart>
			</view>
		</view>
		<view class="info">
			<view class="name">{{ info.terminalName }}</view>
			<view class="sn">终端编号：{{ info.terminalId }}</view>
			<view class="sn">充电枪号：{{ info.gunCode }}</view>
			<view class="power">充电功率：{{ info.power }}kw(近期最大{{ info.pileCurrent }}kw)</view>
			<view class="voltage">充电电压：{{ info.voltage }}</view>
			<view class="standard">{{ info.pileType == 1 ? '慢充' : '快充' }} | {{ info.nationalStandard == 0 ? '国标2011' : '国标2015' }}</view>
		</view>
		<view class=" flex" :class="[speedClass[info.pileType]]">
			<text class="text">{{ speedText[info.pileType] }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object,
				default () {}
			}
		},
		data() {
			return {
				speedText: ['慢', '快', '超'],
				speedClass: ['slow', 'fast', 'super'],
			}
		},
		methods: {
			toStep2() {
				const { stationId, id, pileStatus } = this.info;
				if (Number(pileStatus) !== 0) {
					// return uni.$u.toast('终端已被占用')
				}
				uni.navigateTo({
					url: `/pages/scan/step2?id=${stationId}&terminalId=${id}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.charger-item {
		position: relative;

		&:not(:last-child) {
			border-bottom: 1rpx solid #EEEEEE;
			margin-bottom: 20rpx;
			padding: 20rpx 0;
		}

		&:last-child {
			padding-top: 20rpx;
		}

		.status {
			width: 90rpx;
			flex-direction: column;
			align-items: center;
			margin-right: 30rpx;

			.circle-progress {
				width: 90rpx;
				height: 90rpx;
				position: relative;
				margin-bottom: 15rpx;
			}
		}

		.info {
			overflow: hidden;
			margin-left: 30rpx;
			
			.name {
				font-size: 24rpx;
				color: #333;
				font-family: "PINGFANG";
				margin-bottom: 5rpx;
				font-weight: 400;
			}

			.sn,
			.power,
			.voltage,
			.standard {
				font-size: 22rpx;
				color: #777;
				font-family: "PINGFANG";
				margin-bottom: 5rpx;
			}
		}

		.super,
		.fast,
		.slow {
			position: absolute;
			right: 0;
			top: 20rpx;
			font-family: "PINGFANG";
			font-size: 20rpx;
			color: #fff;
			width: 32rpx;
			height: 32rpx;
			border-radius: 4rpx;
			justify-content: center;
		}

		.super {
			background: linear-gradient(to bottom, #947DFE, #6C4EFB);
		}

		.fast {
			background: linear-gradient(to bottom, #FF8924, #FF6800);
		}

		.slow {
			background: linear-gradient(to bottom, #42E0A2, #2CD291);
		}
	}
</style>